How do you apply global styles inside a Svelte component?
While Svelte components use scoped styles by default, you can apply global styles inside a component using the :global() modifier. This ensures that the styles affect elements outside the component or the entire application.
Wrap selectors with :global() in the <style> block to make them apply globally.
Example: Global Styles in a Component
You can also apply :global() to specific class names or IDs to make them global while keeping other styles scoped.
Example: Global Class
Best practices for applying global styles:
Use
:global()selectively to avoid unintended global overrides.Scoped styles remain isolated by default—use global only when necessary.
You can mix global and local styles in the same
<style>block.Global styles are useful for resetting defaults or styling elements outside the component.